<template>
	<view :class="[primarySize()]">
		<view class="container">

			<view class="pb30">
				<view class="plr30 " style="padding-top: 32rpx;">
					<view class="list" v-if="list.length">
						<view @click="goDetail(item)" class="item" v-for="item in list" :key="item.id">
							<view class="tag" :class="item.status_name=='进行中'?'':'end'">
								<view class="point"></view>
								<view class="desc">{{item.status_name=='进行中'?'正在进行中':item.status_name}}</view>
							</view>
							<image :src="item.banner_image" mode="aspectFill"></image>
							<image class="bg-dark" src="@/static/public/bggg.png" mode="widthFix"></image>
							<view class="title">
								{{item.title}}
							</view>
						</view>
					</view>
					<view class="nothing" v-else>
						<image src="@/static/public/icon_nothing.png" mode="aspectFill"></image>
						<text>抱歉，暂无相关信息</text>
					</view>
					<uni-load-more v-if="params.page!=1&&loadingMore" status="loading"></uni-load-more>
					<uni-load-more v-if="params.page!=1&&list.length==total" status="noMore"></uni-load-more>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				job_type: 0,
				list: [],
				params: {
					page: 1,
					limit: 10,
				},
				total: 0,
				query: {},
				loadingMore: false,

			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onReachBottom() {
			if (this.list.length >= this.total) return
			this.loadingMore = true
			this.params.page += 1
			this.fetch()
		},
		onLoad() {
			this.fetch()
		},
		methods: {
			fetch() {
				this.$core.get({
					url: 'xilujob.third/getRecruitmentList',
					data: {
						page: this.params.page,
						limit: 10
					},
					loading: true,
					success: ret => {
						this.list.push(...ret.data.list)
						this.total = ret.data.total
						this.loadingMore = false
					},
					finally: () => {
						console.log(123);
					}
				});
			},
			goDetail(item) {
				uni.navigateTo({
					url: `/pages/enterprise/hire_detail?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pt88 {
		padding-top: 88rpx;
	}

	.page-head {
		height: 88rpx;
		background: var(--primary);

		.tab_item {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 26rpx;
			color: #FFFFFF;

			&.active {
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
				position: relative;

				&::after {
					content: '';
					width: 36rpx;
					height: 6rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}

	.business_item {
		box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
		background-color: #fff;
		border-radius: 4rpx;
		border: 1rpx solid #EBEBEB;
		padding: 35rpx 30rpx 10rpx;
		position: relative;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.business_img {
		width: 80rpx;
		height: 80rpx;
		margin-right: 32rpx;
		margin-left: 20rpx;
	}

	.business_img image {
		width: 100%;
		height: 100%;
		display: block
	}

	.business_info {
		font-size: 24rpx;
		color: #333
	}

	.cancel_star {
		font-size: 20rpx;
		color: #999;
		line-height: 39rpx;
		height: 39rpx;
		border-radius: 8rpx;
		border: 1rpx solid #E1E1E1;
		padding: 0 15rpx;
		float: left;
		margin-bottom: 13rpx;
		margin-right: 26rpx;
	}

	.star_type {
		float: left;
		font-size: 20rpx;
		color: #999;
		border-radius: 8rpx;
		line-height: 39rpx;
		height: 39rpx;
		padding: 0 17rpx;
		background-color: #F7F7F7;
		border: 1rpx solid #F7F7F7;
		margin-right: 13rpx;
		margin-bottom: 13rpx;
	}

	.price {
		font-size: 28rpx;
		color: var(--primary);
		font-weight: bold
	}

	.refuse_btn {
		color: #999999;
		border: 1rpx solid #999999;
		font-size: 24rpx;
		padding: 0 24rpx;
		border-radius: 8rpx;
		height: 44rpx;
		line-height: 42rpx;
	}

	.agree_btn {
		color: var(--primary);
		border: 1rpx solid var(--primary);
		font-size: 24rpx;
		padding: 0 24rpx;
		border-radius: 8rpx;
		height: 44rpx;
		line-height: 42rpx;
	}

	.recom_info {
		padding-bottom: 35rpx;
	}

	.btn1 {
		height: 82rpx;
		line-height: 82rpx;
		font-size: 30rpx;
	}

	.list {
		.item {
			position: relative;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			overflow: hidden;
			margin-bottom: 26rpx;

			image {
				width: 100%;
				height: 400rpx;
			}

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 700;
				font-size: 28rpx;
				color: #FFFFFF;
				position: absolute;
				left: 40rpx;
				bottom: 40rpx;
				right: 40rpx;
			}

			.tag {
				position: absolute;
				top: 30rpx;
				left: 26rpx;
				padding: 8rpx 20rpx;
				background: rgba(0, 0, 0, 0.4);
				border-radius: 60rpx 60rpx 60rpx 60rpx;
				display: flex;
				align-items: center;

				&.end {
					.point {
						background: #BDBDBD;
					}

					.desc {
						color: #BDBDBD;
					}
				}

				.point {
					width: 8rpx;
					height: 8rpx;
					background: #18D586;
					border-radius: 50%;
					margin-right: 16rpx;
				}

				.desc {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}

			}
		}
	}
	.bg-dark{
		width: 100%;
		height: 108rpx !important;
		position: absolute;
		bottom: 0;
		left: 0;
	}
</style>